import ButtonIcon from '../ButtonIcon';

/**
 * FullScreen 组件 Props 类型定义
 * @property className - 自定义样式类名
 * @property full - 当前是否为全屏状态
 * @property toggleFullscreen - 切换全屏状态的方法
 */
export interface FullScreenProps {
	className?: string;
	full?: boolean;
	toggleFullscreen: () => void;
}

/**
 * FullScreen 组件
 * 用于切换页面全屏与退出全屏状态，支持自定义样式和外部控制全屏状态
 * @param props - 组件参数
 * @returns React.ReactElement
 */
const FullScreen = ({ className, full, toggleFullscreen }: FullScreenProps): React.ReactElement => {
	// 渲染按钮，点击时切换全屏状态，图标根据 full 状态切换
	return (
		<ButtonIcon
			className={className}
			key={String(full)}
			tooltipContent={full ? '退出全屏' : '全屏'}
			onClick={toggleFullscreen}
		>
			{/* 根据 full 状态切换图标 */}
			{full ? <IconGridiconsFullscreenExit /> : <IconGridiconsFullscreen />}
		</ButtonIcon>
	);
};

export default FullScreen;

/**
 * ========================= 典型用法示例 =========================
 *
 * import FullScreen from '@/components/FullScreen';
 *
 * // 在父组件中维护 full 状态
 * const [full, setFull] = useState(false);
 *
 * // 切换全屏状态的处理函数
 * const handleToggleFullscreen = () => {
 *   setFull((prev) => !prev);
 *   // 这里可调用浏览器全屏 API 或其它逻辑
 * };
 *
 * // 在 JSX 中使用
 * <FullScreen
 *   className="custom-fullscreen-btn"
 *   full={full}
 *   toggleFullscreen={handleToggleFullscreen}
 * />
 *
 * // 说明：
 * // 1. full 控制当前是否全屏，toggleFullscreen 负责切换状态
 * // 2. 可自定义 className 以适配不同样式需求
 * // 3. 结合浏览器全屏 API 可实现完整全屏体验
 */
